<template>
  <view class="app">
    <view class="title">🎓 学生信息管理系统</view>

    <!-- 学生信息表单组件 -->
    <StudentForm
      :newStudent="newStudent"
      :editIndex="editIndex"
      @add="addStudent"
      @update="updateStudent"
    />

    <!-- 搜索输入框 -->
    <input
      class="search-bar"
      v-model="keyword"
      placeholder="🔍 搜索学生姓名..."
    />

    <!-- 学生信息列表组件 -->
    <StudentList
      :students="filteredStudents"
      @delete="deleteStudent"
      @edit="editStudent"
    />
  </view>
</template>

<script>
import StudentForm from "/components/StudentForm.vue";
import StudentList from "/components/StudentList.vue";

export default {
  components: {
    StudentForm,
    StudentList,
  },
  data() {
    return {
      students: [
        {
          id: 1,
          sno: "202305571104",
          name: "张三",
          age: 18,
          gender: "男",
          major: "通信工程",
        },
        {
          id: 2,
          sno: "202305571166",
          name: "李四",
          age: 20,
          gender: "女",
          major: "人工智能",
        },
      ],
      newStudent: {
        sno: "",
        name: "",
        age: "",
        gender: "男",
        major: "通信工程",
      },
      editIndex: null,
      keyword: "",
    };
  },
  computed: {
    filteredStudents() {
      return this.students.filter((s) => s.name.includes(this.keyword));
    },
  },
  methods: {
    addStudent(student) {
      const id = Date.now();
      this.students.push({ ...student, id });
      this.resetForm();
    },
    deleteStudent(index) {
      this.students.splice(index, 1);
    },
    editStudent(index) {
      this.newStudent = { ...this.students[index] };
      this.editIndex = index;
    },
    updateStudent(student) {
      this.students[this.editIndex] = { ...student };
      this.resetForm();
    },
    resetForm() {
      this.newStudent = {
        sno: "",
        name: "",
        age: "",
        gender: "男",
        major: "通信工程",
      };
      this.editIndex = null;
    },
  },
};
</script>

<style scoped>
.app {
  padding: 30rpx;
}

.title {
  font-size: 40rpx;
  text-align: center;
  color: #2c3e50;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.search-bar {
  width: 100%;
  padding: 20rpx;
  font-size: 28rpx;
  border: 1rpx solid #ccc;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  background-color: #ffffff;
}
</style>
